<template>
  <div class="main-section-menu">
    <div class="search-block">
      <el-select v-model="majorValue" placeholder="专业搜索" filterable size="large" class="form-group" clearable
        :filter-method="filterMajorSearch">
        <el-option v-for="(item, index) in outMajorList" :key="index" :label="item" :value="item" />
      </el-select>

      <el-select v-model="gradeValue" placeholder="年级搜索" filterable size="large" class="form-group" clearable
        :filter-method="filterGradeSearch">
        <el-option v-for="(item, index) in outGradeList" :key="index" :label="item" :value="item" />
      </el-select>

      <!-- <div class="form-group-bar"> </div> -->
      <div class="college-name" @click="handleUserSearch">查询</div>
      <div class="college-name" @click="handleReset">重置</div>
    </div>
  </div>
  <div class="main-section-display">
    <el-carousel ref="carousel" class="wrap" height="624px"
      :autoplay="true"
      indicator-position="none">
      <el-carousel-item v-for="(item, i) in imageFileTokens" :key="i">
          <div class="image-block">
            <img :src="`http://127.0.0.1:3000/table/pic?file_token=${item}`">
          </div>
      </el-carousel-item>
    </el-carousel>

    <div class="carousel-control">
      <div class="carousel-control_up" @click="carousel.prev()">
        <img src="@/assets/images/arrow.png" alt="" srcset="">
      </div>
      <div class="carousel-control_middle"></div>
      <div class="carousel-control_down" @click="carousel.next()">
        <img src="@/assets/images/arrow.png" alt="" srcset="">
      </div>
    </div>
  </div>
</template>

<script setup>
import { TableFieldsList, TableList } from "@/api";
import { onMounted } from "vue";

import { ref } from "vue";

const carousel = ref(null);
const majorList = ref([]);
const outMajorList = ref([]);
const majorValue = ref('')
const gradeList = ref([]);
const outGradeList = ref([]);
const gradeValue = ref('')
const imageFileTokens = ref([]);

const defaultFileTokens = ref([]);


onMounted(async () => {
  const { data } = await TableFieldsList();
  majorList.value = extractMajorNames(data)
  outMajorList.value = extractMajorNames(data);

  gradeList.value = extractGradeNames(data);
  outGradeList.value = extractGradeNames(data);


  loadDefaultData()
});

function loadDefaultData() {
  TableList({
    page_size: 10,
    // field_names: ["学号"],
    conditions: JSON.stringify([{
      field_name: "图片类型",
      operator: "is",
      value: ["毕业照"]
    }]),
  }).then(res => {
    const fileTokens = getAllFileTokens(res);
    imageFileTokens.value = fileTokens;
    defaultFileTokens.value = fileTokens;
  });
}

function extractMajorNames(data) {
  // 找到"专业"字段
  const majorField = data.items.find(item => item.field_name === "专业");
  // 如果没有找到专业字段，返回空数组
  if (!majorField || !majorField.property || !majorField.property.options) {
    return [];
  }
  // 提取所有专业名称
  const majorNames = majorField.property.options.map(option => option.name.trim());
  return majorNames;
}

function extractGradeNames(data) {
  // 找到"届数"字段
  const gradeField = data.items.find(item => item.field_name === "届数");
  // 如果没有找到届数字段，返回空数组
  if (!gradeField || !gradeField.property || !gradeField.property.options) {
    return [];
  }
  // 提取所有届数名称
  const gradeNames = gradeField.property.options.map(option => option.name.trim());
  return gradeNames;
}

function filterMajorSearch(value) {
  outMajorList.value = majorList.value.filter(item => {
    return item.toLowerCase().includes(value.toLowerCase());
  });
}

function filterGradeSearch(value) {
  outGradeList.value = gradeList.value.filter(item => {
    return item.toLowerCase().includes(value.toLowerCase());
  });
}

function getAllFileTokens(data) {
    const fileTokens = [];

    // 检查数据结构是否有效
    if (!data || !data.data || !data.data.items || !Array.isArray(data.data.items)) {
        return fileTokens;
    }

    // 遍历所有items
    data.data.items.forEach(item => {
        if (item.fields && item.fields['图片附件'] && Array.isArray(item.fields['图片附件'])) {
            // 遍历每个item中的图片附件
            item.fields['图片附件'].forEach(attachment => {
                if (attachment.file_token) {
                    fileTokens.push(attachment.file_token);
                }
            });
        }
    });

    return fileTokens;
}

function handleUserSearch() {
  imageFileTokens.value = [];
  if (majorValue.value === '' && gradeValue.value === '') {
    return;
  }
  TableList({
    page_size: 500,
    // field_names: ["学号"],
    conditions: JSON.stringify([{
      field_name: "专业",
      operator: "is",
      value: [majorValue.value]
    }, {
      field_name: "届数",
      operator: "is",
      value: [gradeValue.value]
    }, {
      field_name: "图片类型",
      operator: "is",
      value: ["毕业照"]
    }]),
  }).then(res => {
    const fileTokens = getAllFileTokens(res);
    imageFileTokens.value = fileTokens;
  });
}

function handleReset() {
  majorValue.value = '';
  gradeValue.value = '';
  outMajorList.value = majorList.value;
  outGradeList.value = gradeList.value;
  imageFileTokens.value = defaultFileTokens.value;
}
</script>

<style lang="css" scoped></style>


<style scoped lang="scss">
.search-block {
  padding-top: 27px;
}

.form-group {
  width: auto;
  margin: 0 20px;
  border: 5px solid #703B32;
  display: block;
  height: 45px;
  line-height: 1;
  border-radius: 45px;
  overflow: hidden;
  margin-bottom: 12px;

  ::v-deep &>div {
    height: 45px;
    line-height: 1;
    box-shadow: none !important;
  }

  ::v-deep .el-select__placeholder {
    text-align: center;
  }
}

input {
  width: 100%;
  height: 100%;
  outline: none;
  text-align: center;
  border: none;
}

.form-group-bar {
  margin: 0 20px;
  width: auto;
  height: 5px;
  background-color: #E76C00;
  margin-bottom: 12px;
}

.college-name {
  margin: 0 20px;
  width: auto;
  height: 35px;
  line-height: 35px;
  border-radius: 45px;
  overflow: hidden;
  margin-bottom: 12px;
  text-align: center;
  background-color: #E76C00;
  color: #fff;

  &.active {
    background-color: #28a745;
  }
}

.wrap {
  width: 940px;
  height: 624px;
  background-color: #fff;
  margin-top: 37.5px;
  margin-left: 35px;
}

.image-block {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .95);
  margin-right: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  position: relative;
  &.active{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
  }

  &:nth-child(6n) {
    margin-right: 0;
  }

  img {
    height: 100%;
  }
}

.carousel-control{
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  &_up{
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-bottom: 20px;
  }
  &_middle{
    width: 50px;
    height: 50px;
    border: 5px solid #E76C00;
    margin-bottom: 20px;
    border-radius: 5px;
  }
  &_down{
    width: 50px;
    height: 50px;
    cursor: pointer;
    transform: rotate(180deg);
  }
}
</style>
